<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>component vmodel</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<div style="background-color: aliceblue">
			<p>{{vmodelValue}}</p>
			<vmodelcomp v-model="vmodelValue" ></vmodelcomp>
		</div>
	</div>
<script>
    Vue.component('vmodelcomp',{
        template: '<div><span>{{conter}}</span><button @click="add">+1</button></div>',
		props: {
            vmodelValue: 0
		},
        data: function () {
            return {
                conter: this.vmodelValue
            }
        },
        methods:{
            /**
             * 定义子组件在点击时组件触发input事件,父组件通过v-model绑定数据时只能监听实际为一个
             * 子组件input事件触发和父组件该绑定参数重置方法的语法糖,如果此处定义触发的事件不为input时，v-model会绑定失败
             */
            add: function () {
                debugger
                this.conter ++;
                this.$emit("input",this.conter);
            }
        }
    });

   new Vue({
       el: '#app',
	   data: {
           vmodelValue: 5
	   }
   })
</script>
</body>
</html>